<template>
    <div class="dataview-page-setting">
        <div class="upload-bg mb-2">
            <input ref="file" class="file" type="file" name="file" @change="fileChange">
            <div class="select-bg-file" ref="selectBgBtnRef" @click="openFile">
                <div class="bg" v-if="dataviewStore.getEditCanvasConfig.backgroundImage" @click.stop="handleClearBgCover">
                    <div class="mark">
                        <CloseOutlined :style="{
                            fontSize: '40px',
                            color:'#fff'
                        }"/>
                    </div>
                    <img :src="`/${dataviewStore.getEditCanvasConfig.backgroundImage}`" alt="背景">
                </div>
                <span>上传背景,格式支持jpg、jpeg、png</span>
            </div>
        </div>
        <a-space  direction="vertical" class="w-full setting2">
            <div class="bg-color-select flex">
                <span class="title">背景颜色</span>
                <color-picker format="rgb" v-model:pureColor="dataviewStore.getEditCanvasConfig.background"/>
            </div>
            <div class="bg-control flex">
                <span class="title">背景控制</span>
                <div class="flex-1 flex">
                    <a-button class="flex-1" @click="handleClearBgCover" :disabled="!dataviewStore.getEditCanvasConfig.backgroundImage">清除背景</a-button>
                    <a-button class="flex-1" @click="handleClearBgColor" :disabled="!dataviewStore.getEditCanvasConfig.background?true:false">清除背景色</a-button>
                </div>
            </div>
        </a-space>

        <a-divider />

        <a-tabs type="card">
            <a-tab-pane 
                v-for="item in globalTabList" :key="item.key"
            >
                <template #tab>
                    <span class="flex items-center">
                        <icon :icon="item.icon"/>
                        {{ item.title }}
                    </span>
                </template>
                <component :is="item.render" />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script setup lang="ts">
import { useThemeConfig } from '@/stores/themeConfig';
import { showMsg } from '@/utils';
import { computed,defineAsyncComponent,onMounted,onUnmounted,reactive,ref,useTemplateRef} from 'vue';
import { useDataViewStore } from '@/stores/dataview';
import { storeToRefs } from 'pinia';
import { uploadBgCoverAPI } from '@/api/dataview/project';
import { useRoute } from 'vue-router';
import { ColorPicker } from "vue3-colorpicker";
import icon from '@/components/Iconify/index.vue'

const ChartThemeColor = defineAsyncComponent(()=>import('./components/ChartThemeColor/index.vue'))
const VChartThemeColor = defineAsyncComponent(()=>import('./components/VChartThemeColor/index.vue'))

const route = useRoute()

const fileRef = useTemplateRef("file")
const selectBgBtnRef = useTemplateRef("selectBgBtnRef")
const file = ref<File>()


const dataviewStore = useDataViewStore()
const {dataviewState} = storeToRefs(dataviewStore)

const state = reactive({
    uploadConfig:{
        url:''
    }
})

const globalTabList = [
    {
        key: 'ChartTheme',
        title: '默认主题',
        icon: "mdi:color",
        render: ChartThemeColor
    },
    {
        key: 'VChartTheme',
        title: 'VChart主题',
        icon: "mdi:color",
        render: VChartThemeColor
    }
]

const primaryColore = computed(()=>{
    return useThemeConfig().themeConfig.primary
})


const beforeUpload = ()=>{
    const allowSuffix = ['jpg','jpeg','png']
    const suffix = file.value?.name.split('.').pop()
    if(suffix && !allowSuffix.includes(suffix)){
        file.value = undefined
        showMsg("上传的文件格式不支持",'warning')
        return false
    }
    return true
}

const fileChange = async(e: Event) => {
    const target = e.target as HTMLInputElement
    file.value = target.files?.[0]
    if(beforeUpload() && file.value){
        const id = route.params.id
        let res = await uploadBgCoverAPI(file.value,id)
        dataviewState.value.editCanvasConfig.backgroundImage = res.data.result.url
    }
}

const openFile = ()=>{
    fileRef.value?.click()
}

const handleClearBgColor = ()=>{
    dataviewStore.getEditCanvasConfig.background = undefined
    if(dataviewStore.getEditCanvasConfig.backgroundImage){
        dataviewState.value.editCanvasConfig.selectColor = false
    }
}
const handleClearBgCover = ()=>{
    dataviewState.value.editCanvasConfig.backgroundImage = undefined
    dataviewState.value.editCanvasConfig.selectColor = true
}
onMounted(()=>{

})

onUnmounted(()=>{

})
</script>

<style lang='scss' scoped>
.dataview-page-setting{
    width: 99%;
    .upload-bg{
        cursor: pointer;
        .file{
            display: none;
        }
        .select-bg-file{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            border: 2px dashed #ccc;
            border-radius: 5px;
            overflow: hidden;
            transition: all .3s ease;
            padding:10px 5px;
            img{
                width: 100%;
                height: 100%;
            }
            .bg{
                width: 100%;
                height: 150px;
                border-radius: 5px;
                overflow: hidden;
                position: relative;
                .mark{
                    position: absolute;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, 0.5);
                    opacity: 0;
                    transition: all .3s ease;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                &:hover{
                    .mark{
                        opacity: 1;
                    }
                }
            }
            &:hover{
                border: 2px dashed v-bind('primaryColore');
            }
        }
    }
    .setting2{
        :deep(.vc-color-wrap){
            flex: 1;
            border-radius: 5px;
        }
        .title{
            margin-right: 10px;
        }
    }
}


</style>